<template>
  <div>
    <transition name="bounce">

      <div class="dialog-ctrl-body" v-if="dialogInit" v-show="dialogIsShow">
        <div class="dialog-ctrl">
          <div class="dialog-header">
            <p>{{dialogInit.title}}</p>
          </div>
          <!-- {{dialogInit}} -->
          <div class="dialog-content">
            {{dialogInit.content}}
          </div>
          <div class="dialog-footer text-r">
            <button type="button" class="btn" :class="item.className" v-for="(item,index) in dialogInit.btns" @click="dialogBtnLayout(item,dialogInit.url,dialogInit.httpType,dialogInit.params,dialogInit.cacheDelete,dialogInit.callBack)" :key="index">
                {{item.name}}
              </button>
            <!-- <button type="button" class="btn btn-default">取消</button>
              <button type="button" class="btn btn-info">确认</button>-->
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "Dialog",
    props: ["dialogInit", "dialogIsShow"],
    data() {
      return {

      }
    },
    methods: {
      dialogBtnLayout(btnType, url, httpType, params, cacheDelete, callBack) {
        //console.log(btnType);
        switch (btnType.operation) {
          case "close":
            //console.log("单纯关闭功能");
            this.dialogClose();
            break;
          case "submit":
            //console.log("提交功能");
            this.$emit("SubmitDialogBtn", {
              "url": url,
              "httpType": httpType,
              "params": params,
              "cacheDelete": cacheDelete,
              "callBack": callBack
            });
            break;
        }
        //this.$emit("childrenDialogShow");
      },
      dialogClose() { //弹窗关闭函数
        this.$emit("dialog-close")
      },

    }
  }
</script>

<style scoped>
  .bounce-enter-active {
    animation: bounce-in 0.55s;
  }

  .bounce-leave-active {
    animation: bounce-in 0.55s reverse;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
